import React from 'react'
import { useEffect, useState } from 'react'
import './Recommend.css';
import axios from "axios";
import { Link } from 'react-router-dom'

const Recommend = (props) => {
    let user = props.location.state.user;
    console.log(user)
    const [designList, setdesignList] = useState([]);
    const [userList, setuserList] = useState([]);
    const [allList, setallList] = useState([]);
    let List = [];
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getUserDesignDatas")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let design_image = 'http://192.168.72.166:8080/' + item.design_image;
                    item.design_image = design_image
                })
                setdesignList(data)
            });
        axios.get("http://192.168.72.166:8080/api/getUsers")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let avatar = 'http://192.168.72.166:8080/' + item.user_head_portrait;
                    item.user_head_portrait = avatar;
                })
                setuserList(data)
            });
    }, []);
    useEffect(() => {
        List = designList.map(item => {
            const data = userList.find(item1 => item.user_id == item1.user_id);
            return { ...item, ...data };
        });
        setallList(List);
    }, [designList, userList])
    console.log(allList)
    return (
        <div className="recommend_box">
            {
                allList.map(item => {
                    if (item.design_is_recommend == 1)
                        return (
                            <div className='recommend_item' key={item.design_id} >
                                <Link to={{ pathname: '/show/designContent', state: { dcontent: item, user: user } }} >
                                    <img className='re_img' src={item.design_image} />
                                    <div className='recommend_designer'>
                                        <span className='design_name'>{item.design_name}</span>
                                        <div className='usermessage'>
                                            <img className='re_avatar' src={item.user_head_portrait} />
                                        </div>
                                        <span className='user_name'>{item.user_name}</span>
                                    </div>
                                </Link>
                            </div>
                        )
                })
            }
        </div>
    )
}

export default Recommend;